<template>
    <el-container>
        <el-header>
            <div class="left">
                <img src="../assets/imgs/shop.png" alt="">
                <span>电商后台管理系统</span>
            </div>
            <div class="right">
                <span>欢迎您：{{userInfo.username}}</span>
                <el-button type="danger" size="mini" @click="logout">退出</el-button>
            </div>
        </el-header>
        <el-container>
            <el-aside>
               <el-menu :default-active="$router.path" unique-opened router>
                   <el-submenu :index="item.id+''" v-for="item in menusList" :key="item.id">
                       <template slot="title">
                           <i icon='el-icon-lock'></i>
                           <span>{{item.authName}}</span>
                        </template>
                       <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id"><i class="el-icon-menu"></i>{{subItem.authName}}</el-menu-item>
                   </el-submenu>
               </el-menu>


            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
   data() {
      return {
          userInfo:null,
          menusList:[]
      }
   },
   created(){
       this.userInfo=JSON.parse(sessionStorage.getItem('userInfo')),
       this.getMenusList()
   },
   computed:{
   },
   methods:{
       //退出
       logout(){
           this.$confirm('确定要退出登录吗？','提示',{
               confirmButtonText:'确定',
               cancelButtonText:'取消',
               type:'warning'

           }).then(()=>{
               sessionStorage.clear()
               this.$router.push('/login')
           }).catch(()=>{
               this.$message.info('已取消退出')
           })
       },
       //获取 菜单列表
      async getMenusList(){
           const{data:res}=await this.$http.get('menus')
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取列表失败')
           }
           this.menusList=res.data
           this.$message.success('获取列表成功')
       }
   },
}
</script>
<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
}
.el-header{
    background: url('../assets/imgs/header_bg.gif') repeat;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        display: flex;
        align-items: center;
        img{
            width: 40px;
            margin-right: 10px;
        }
    }
    .right{
        span{
            margin-right: 10px;
        }
    }
}
</style>
